<template>
	<view class="search-small" :class="[{ show: visible }]">
		<view class="coupon" @tap="$Router.push('/pages/jd/search')">
			<view class="swiper">
				<text class="iconfont">&#xe6c8;</text>
				<view class="coupon-input">复制京东商品，领券下单拿补贴</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Search',

	props: {
		shareTemplate: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	data() {
		return {
			visible: false
		};
	},
	created() {
		this.show();
	},
	methods: {
		show() {
			this.visible = true;
		},
		hide() {
			this.visible = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.search-small {
	width: 100%;
	z-index: 999;
	height: 78rpx;
	text-align: center;
	position: fixed;
	top: -6rpx;
	opacity: 0;
	background: $color-white;
	background-size: 100%;
	padding-top: 10rpx;
	@include flexBox(center, null);

	&.show {
		opacity: 1;
	}

	.coupon {
		width: 658rpx;
		height: 60rpx;
		margin-top: 4rpx;
		background: #f4f4f4;
		border-radius: 50rpx;
		padding: 12rpx 28rpx;
		@include flexBox(null, center);
		.swiper {
			width: 600rpx;
			display: flex;
			align-items: center;
			.iconfont {
				color: $main-color;
				font-size: 40rpx;
				margin-right: 20rpx;
			}
			.input-box {
				background: #f4f4f4;
				height: 60rpx;
				display: flex;
				align-items: center;
			}
		}
	}
}
</style>
